<template>
    <div id="Info">
        <div class="jx-content">
            <div class="topcoumt">
                <div class="search-box fl">
                    <el-form :inline="true"  :model="FormInfo" class="fl">
                        <el-form-item label="管理员信息 :">
                            <el-input v-model="FormInfo.info" placeholder="请输入工号或者姓名" maxlength="20"></el-input>
                        </el-form-item>
                    </el-form> 
                    <button class="button-style" @click="searchFn">搜 索</button> 
                </div>
                <div class="btn-group fr">
                     <button class="button-style"  @click="deleteAll" >批量删除</button>
                 </div>
                <div class="btn-group fr">
                    <button class="button-style"  @click="add" >添 加</button>
                </div>
            </div>
            <div class="table">
               <el-table :data="tableData" style="width: 100%"  @selection-change="handleSelectionChange">
                    <el-table-column  type="selection" width='100'  :selectable='selectchoose'></el-table-column>
                    <el-table-column prop="name" label="管理员名称" ></el-table-column>
                    <el-table-column prop="userNumber" label="工号" ></el-table-column>
                    <el-table-column prop="telephoneNumber" label="手机号"></el-table-column>
                    <el-table-column prop="roleName" label="角色"> </el-table-column>
                    <el-table-column  label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"  @click="repeatFn(scope.row.id,scope.row.name, scope.row.userNumber,scope.row.telephoneNumber,scope.row.roleName)" v-if="scope.row.allowedModified==true">修改</el-button>
                            <el-button type="text" size="small" style="color:#959595" v-if="scope.row.allowedModified==false">修改</el-button>
                            <el-button type="text" size="small"  @click="repeatCode(scope.row.id)" v-if="scope.row.allowedModified==true" >初始密码</el-button>
                            <el-button type="text" size="small"  style="color:#959595" v-if="scope.row.allowedModified==false" >初始密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
             <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
             ></el-pagination>
             <el-dialog :close-on-click-modal="false"  title="添加用户" :visible.sync="dialogVisible" width="680px"  @close="closeDialog">
                <el-form ref="formlist" :inline="true"  :rules="rules" :model="formlist" >
                    <el-form-item label="姓名 :" prop="name" >
                        <el-input v-model="formlist.name" placeholder="请输入姓名" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="工号 :" prop="number" >
                        <el-input v-model="formlist.number" placeholder="请输入工号"  maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号 :"  prop="telephone" >
                        <el-input v-model="formlist.telephone" placeholder="请输入手机号" maxlength="11"></el-input>
                    </el-form-item>
                    <el-form-item label="角色 ："  prop="role" style="margin-left:7px;">
                        <el-select v-model="formlist.role" placeholder="请选择角色" style="margin-left:-7px;">
                            <el-option
                            v-for="item in formlist.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="密码 :" prop="passWord3"  >
                        <el-input type="password" v-model="formlist.passWord3"  maxlength="16" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码 :"  prop="checkPass">
                        <el-input type="password" v-model="formlist.checkPass" maxlength="16"  placeholder="请输入确认密码"></el-input>
                    </el-form-item>
                </el-form>
                <div class="btn-center" style="text-align: center;">
                    <button class="button-style" @click="submitFn('formlist')" >保 存</button>
                </div>
             </el-dialog>
            <el-dialog :close-on-click-modal="false"  title="修改用户" :visible.sync="dialog" width="400px" >
                <el-form ref="formlist2" :inline="true"  :rules="rules2" :model="formlist2" >
                    <el-form-item label="姓名 :" prop="name">
                        <el-input v-model="formlist2.name" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="工号 :" prop="number" >
                        <el-input v-model="formlist2.number" :disabled="true"></el-input>
                    </el-form-item>
                     <el-form-item label="手机号 :" >
                        <el-input v-model="formlist2.telephone" maxlength="11"></el-input>
                    </el-form-item>
                     <el-form-item label="角色 ：" prop="role" >
                        <el-select v-model="formlist2.role">
                            <el-option
                            v-for="item in formlist2.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="btn-center" style="text-align: center;">
                    <button class="button-style" @click="submit('formlist2')" >保 存</button>
                </div>
            </el-dialog>
            <!-- <el-dialog :close-on-click-modal="false"  title="提示" :visible.sync="dialogTips" width="400px">
                <div class="dialogTips">
                    <p>
                        <i class="iconfont icon-jingshi "></i> 是否保留教师课程
                    </p>
                    <el-radio-group v-model="flagExict" class="flagExict">
                        <el-radio :label="1">保留</el-radio>
                        <el-radio :label="2">不保留</el-radio>
                    </el-radio-group>
                        <div slot="footer" class="dialog-footer" style="margin-top:20px">
                        <el-button class="button-style" @click="dialogTipSave">确 定</el-button>
                    </div>
                </div>
            </el-dialog> -->
        </div>
    </div>
</template>

<script>
    export default {
        data () {
           // 手机号验证
            var validPhone = (rule, value,callback)=>{
                if(value !== ''){
                    var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
                    if(!reg.test(value)){
                    callback(new Error('请输入正确的11位手机号码'));
                  }
                }else{
                    callback();
                 }
            }
           // 密码验证
            var validatePass = (rule, value, callback) => {
                let self =this
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else if(value !== ''){
                    var reg=/^[a-zA-Z0-9]{6,14}$/;
                    if(!reg.test(value)){
                        callback(new Error('请输入6-14位数字或中英文字符'))
                    }
                     if (self.formlist.checkPass !== '') {
                        self.$refs.formlist.validateField('checkPass')
                    }
                } 
                callback()
            }
			var validatePass2 = (rule, value, callback) => {
                let self =this
				if (value === '') {
					callback(new Error('请再次输入密码'))
                } else if (value !== ''){
                    var reg=/^[a-zA-Z0-9]{6,14}$/;
                    if(!reg.test(value)){
                        callback(new Error('请输入6-14位数字或中英文字符'))
                    }
                    if (value !== self.formlist.passWord3) {
					    callback(new Error('两次输入密码不一致!'))
                    } 
                }
                callback()
            }
            return {
                FormInfo:{
                    info:'',
                },
                id:'',
                dialogVisible:false,
                multipleSelection:[],
                dialog:false,
                formlist:{
                     number:'',
                     name:'',
                     telephone:'',
                     role:'',
                      options: [{
                        value: '3',
                        label: '管理员'
                        },{
                        value: '4',
                        label: '超级管理员'
                        }],
                },
                formlist2:{
                     number:'',
                     name:'',
                     checkPass:'',
                     passWord3:'',
                     telephone:'',
                     role:'',
                      options: [{
                        value: '3',
                        label: '管理员'
                        },{
                        value: '4',
                        label: '超级管理员'
                        }],
                },
               
                 rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { max: 10, message: '最多输入10个字符', trigger: 'blur' },
					],
                    number: [
                        { required: true, message: '请输入工号', trigger: 'blur' }
                    ],
                    role: [
                        { required: true, message: '请输入角色', trigger: 'blur' }
                    ],
                    // telephone: [
                    //     { required: true, message: '请输入联系方式', trigger: 'blur' },
                    //     // { required: true, validator: validPhone, trigger: 'blur' }
					// ],
                    passWord3: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { required: true, validator: validatePass, trigger: 'blur' },
                      
					],
					checkPass: [
                        { required: true, message: '请再次输入密码', trigger: 'blur' },
                        { required: true, validator: validatePass2, trigger: 'blur' },
                    ]
                },
                 rules2: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { max: 10, message: '最多输入10个字符', trigger: 'blur' },
					],
                    number: [
                        { required: true, message: '请输入工号', trigger: 'blur' }
                    ],
                    role: [
                        { required: true, message: '请输入角色', trigger: 'blur' }
                    ],
                    telephone: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' },
                        { required: true, validator: validPhone, trigger: 'blur' }
					],
                    // passWord3: [
                    //     { required: true, message: '请输入密码', trigger: 'blur' },
					// 	{ required: true, validator: validatePass, trigger: 'blur' },
					// ],
					// checkPass: [
                    //     { required: true, message: '请输入确认密码', trigger: 'blur' },
                    //     { required: true, validator: validatePass2, trigger: 'blur' },
                    // ]
                },
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                tableData: [],

                
             }
        },
        created() {
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/tes/user/page?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&identity='+3+'&userInfo='+self.FormInfo.info).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.content
                        self.totalCount = res.data.total
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            selectchoose(row,index){
                if(row.allowedModified==false){
                    return false
                }else{
                    return true
                }
            },
            //保存
            // dialogTipSave(){
            //     let self = this
            //     let url =''
            //     if(self.flagExict == 1){
            //         url = '/tes/user/batch-delete?errorFlag='+ true + '&updatePreseted=true'
            //     }else if(self.flagExict == 2){
            //         url = '/tes/user/batch-delete?errorFlag='+ true + '&updatePreseted='
            //     }
            //     self.$http.post(url,self.multipleSelection).then((response) => {
            //        let res = response.data;
            //         if(res.code == '200'){
            //             self.$message({
            //                 message: '删除成功',
            //                 type: 'success'
            //             })
            //             self.dialogTips = false
            //             self.currentPage = 1
            //             self.init()
            //         }else{
            //             self.$message.error(res.message)
            //         }
            //     })
            // },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
				this.multipleSelection = valArr
            },
            //搜索
            searchFn(){
               this.init()
               this.currentPage = 1 
            },
            //修改保存
            submit(formlist2){
                let self = this
                self.$refs[formlist2].validate((valid) => {
                    if (valid) {
                        self.$http.put('/tes/user/'+self.id+'?identity=3',{
                           name:self.formlist2.name,
                           userNumber:self.formlist2.number,
                           telephoneNumber:self.formlist2.telephone,
                           roleName:self.formlist2.role=='管理员'? '管理员' :'超级管理员'
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                self.init()
                                self.dialog=false
                                this.$refs[formlist2].resetFields()
                               
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //添加保存
            submitFn(formlist){
                let self = this
                self.$refs[formlist].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '正在保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/tes/user?identity=3',{
                           name:self.formlist.name,
                           userNumber:self.formlist.number,
                           telephoneNumber:self.formlist.telephone,
                           roleName:self.formlist.role,
                           password:self.formlist.passWord3,
                          
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                self.init()
                                self.dialogVisible=false
                                self.formlist.telephone=''
                                loading.close()
                            }else{
                                self.$message.error(res.message)
                                loading.close()
                            }
                        })
                    }
                })
            },
            //添加
            add(){
              this.dialogVisible=true
              this.formlist.telephone=''
              
            },
            //批量删除
            deleteAll(){
                let self = this;
                //console.log(self.multipleSelection)
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的内容',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/tes/user/batch-delete?errorFlag=true',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
							self.currentPage = 1
							self.init()
						}else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
                    })
                    //self.dialogTips = true
				}).catch(() => {
				})

            },
            //修改
            repeatFn(id,name,userNumber,telephoneNumber,roleName){
               this.dialog=true
               this.formlist2.name=name
               this.formlist2.number=userNumber
               this.formlist2.telephone=telephoneNumber
               this.formlist2.role=roleName
               this.id=id
            },
            //初始密码
            repeatCode(id){
                let self = this
                self.$http.put('/tes/user/'+id+'/init-password').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
             //关闭弹窗
            closeDialog(){
                let self =this
                this.$nextTick(function(){
                    self.$refs.formlist.resetFields();
                })
            },
        }
    }
</script>
<style scoped>
.el-form--inline>>>.el-form-item__label {
    text-align: right;
    float: left;
    display: inline-block;
    width: 108px !important;
}
.el-form >>>.el-input__inner{
     width: 170px;  
     line-height: 32px; 
}
.dialogTips{
    margin: 10px auto;
    text-align: center;
}
.flagExict{
    margin: 20px 0 10px 0;
}
.icon-jingshi{
    color: #1277eb;
}
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
 #Info {
    width: $width;
    margin: 20px auto;
    color: #727272;
      .topcoumt{
       overflow: hidden;
        .button-style{
           margin-right: 15px;
        }
     }
 }
</style>